svelte
Advanced tools
Package description
Svelte is a modern JavaScript compiler that allows you to write high-performance user interfaces with significantly less boilerplate code than traditional frameworks. It shifts much of the work to compile time, producing highly optimized vanilla JavaScript at the end.
Reactive Declarations
Svelte allows you to write reactive statements using the $: syntax. When the state changes, the reactive statements automatically update to reflect the new state.
let count = 0;
$: doubled = count * 2;Component Definition
Components in Svelte are defined using a combination of HTML, CSS, and JavaScript, which are encapsulated within a single file with a .svelte extension.
<script>
export let name;
</script>
<h1>Hello {name}!</h1>Store Management
Svelte provides a simple store mechanism to manage global state. The 'writable' store is a basic store that allows reading and writing values reactively.
import { writable } from 'svelte/store';
const count = writable(0);Transitions and Animations
Svelte makes it easy to add transitions and animations to elements when they enter or leave the DOM.
import { fade } from 'svelte/transition';
<div in:fade={{ delay: 0, duration: 200 }}>Fade In</div>Bindings
Svelte provides a concise syntax for two-way data binding to HTML elements, allowing for easy synchronization between the DOM and component state.
<script>
let value = '';
</script>
<input bind:value={value} />React is a popular JavaScript library for building user interfaces. It uses a virtual DOM for efficient updates, and it's known for its component-based architecture. Unlike Svelte, React requires a runtime library and often involves more boilerplate code.
Vue is a progressive JavaScript framework used for building UIs and single-page applications. It is similar to Svelte in its component structure and reactivity model but differs in that it uses a virtual DOM and requires a runtime.
Angular is a platform and framework for building single-page client applications using HTML and TypeScript. It is more prescriptive than Svelte, with a complex ecosystem and a steep learning curve, and it includes features like dependency injection and RxJS integration.
Preact is a fast, 3kB alternative to React with the same modern API. It provides a similar component-based architecture but with a smaller footprint. Preact is closer to Svelte in terms of size but still operates with a virtual DOM.
Readme
Svelte is a new way to build web applications. It's a compiler that takes your declarative components and converts them into efficient JavaScript that surgically updates the DOM.
Learn more at the Svelte website, or stop by the Discord chatroom.
Svelte is an MIT-licensed open source project with its ongoing development made possible entirely by fantastic volunteers. If you'd like to support their efforts, please consider:
Funds donated via Open Collective will be used for compensating expenses related to Svelte's development such as hosting costs. If sufficient donations are received, funds may also be used to support Svelte's development more directly.
You may view our roadmap if you'd like to see what we're currently working on.
Pull requests are encouraged and always welcome. Pick an issue and help us out!
To install and work on Svelte locally:
git clone https://github.com/sveltejs/svelte.git
cd svelte
npm install
Do not use Yarn to install the dependencies, as the specific package versions in
package-lock.jsonare used to build and test Svelte.
To build the compiler and all the other modules included in the package:
npm run build
To watch for changes and continually rebuild the package (this is useful if you're using npm link to test out changes in a project locally):
npm run dev
The compiler is written in TypeScript, but don't let that put you off — it's basically just JavaScript with type annotations. You'll pick it up in no time. If you're using an editor other than Visual Studio Code, you may need to install a plugin in order to get syntax highlighting and code hints, etc.
npm run test
To filter tests, use -g (aka --grep). For example, to only run tests involving transitions:
npm run test -- -g transition
The source code for https://svelte.dev lives in the sites repository, with all the documentation in the site/content directory. The site is built with SvelteKit.
Probably not, but it's possible. If you can't seem to access any .dev sites, check out this SuperUser question and answer.
FAQs
Cybernetically enhanced web apps
The npm package svelte receives a total of 1,085,233 weekly downloads. As such, svelte popularity was classified as popular.
We found that svelte demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.